<script>
import RunningTime from '@/common/runningTime'
import echarts from 'echarts'
import { getAllInfo } from 'services/x-start/mgr/activity'

export default {
  components: { RunningTime },
  data() {
    return {
      everydayList: {}, // 每日人次
      realTimeList: [], // 实时监控
      trendList: {}, // 每日监控
      currentType: 'day',
    }
  },
  created() {
    if (!this.$route.params.id) {
      this.$router.go(-1)
      return
    }
    this.getAllInfo()
  },
  methods: {
    getAllInfo() {
      getAllInfo({
        raceId: this.$route.params.id,
      })
        .then(({ everydayList, realTimeList, trendList }) => {
          this.everydayList = everydayList // 每日人次
          this.realTimeList = realTimeList // 实时监控
          this.trendList = trendList // 每日监控
          this.init()
        })
        .catch(({ payload }) => {
          this.$message.error(payload && payload.msg)
        })
    },
    init() {
      let personCount = this.realTimeList.map(item => item.personCount)
      let personMax = this.realTimeList.map(item => item.personMax)
      let legend = this.realTimeList.map(item => item.name)
      this.draw({
        ref: 'charts1',
        legend: ['实时人数', '极限人数'],
        x: legend,
        series: [
          {
            name: '实时人数',
            type: 'bar',
            data: personCount,
            barWidth: 20,
            itemStyle: {
              emphasis: {
                barBorderRadius: 25,
              },
              normal: {
                barBorderRadius: 25,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#ffe799'},
                  { offset: 1, color: '#ffda60' },
                ]),
              },
            },
          },
          {
            name: '极限人数',
            type: 'bar',
            data: personMax,
            barWidth: 20,
            itemStyle: {
              emphasis: {
                barBorderRadius: 25,
              },
              normal: {
                barBorderRadius: 25,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#feaea2' },
                  { offset: 1, color: '#fd7270' },
                ]),
              },
            },
          },
        ],
      })
      this.draw2(this.everydayList)
    },
    draw2(data, type = 'bar') {
      this.draw({
        ref: 'charts2',
        x: Object.keys(data),
        y: Object.values(data),
        series: [
          {
            data: Object.values(data),
            type: type,
            barWidth: 20,
            itemStyle: {
              emphasis: {
                barBorderRadius: 25,
              },
              normal: {
                barBorderRadius: 25,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#feaea2' },
                  { offset: 1, color: '#fd7270' },
                ]),
              },
            },
          },
        ],
        type,
      })
    },
    draw({
      ref,
      name = '',
      x = [],
      y = [],
      type = 'line',
      legend = [],
      series = [],
    }) {
      let dom = echarts.init(this.$refs[ref])
      dom.setOption({
        title: {
          text: name,
          x: 'center',
        },
        legend: {
          data: legend,
        },
        color: ['#4472C4', '#ed7d31'],
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            interval: 0,
            rotate: -20,
          },
          axisLine: {
            lineStyle: {
              color: '#999', // 颜色
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series,
      })
    },
  },
  watch: {
    currentType() {
      if (this.currentType == 'day') {
        this.draw2(this.everydayList)
      } else {
        this.draw2(this.trendList, 'line')
      }
    },
  },
}
</script>

<template lang="pug">
.mainRight
  .content
    .left
      .warehouse
        .title 赛事客流实时监控
        .draw(ref="charts1")
      .warehouse
        .title 每日人次
          .time
            el-select(v-model="currentType" size="mini" placeholder="请选择")
              el-option(key="按日查询" label="按日查询" value="day")
              el-option(key="查询当天" label="查询当天" value="oneDay")
        .draw(ref="charts2")
    .right
      .warehouse
        .title 赛事区域列表
        el-table(
          ref="table"
          stripe
          :data="realTimeList"
          tooltip-effect="dark"
          fit
        )
          el-table-column(prop="name" label="区域")
          el-table-column(prop="personCount" label="实时人数" )
          el-table-column(prop="personMax" label="极限人数")
          el-table-column(label="饱和度")
            template(slot-scope="{row}")
              span {{(row.personCount/row.personMax).toFixed(2)}}
</template>
<style lang="stylus" scoped>
.el-radio-group
  display block
  text-align center
  margin-bottom 20px
  .el-radio-button
    margin-right 50px
.mainRight
  .content
    display flex
    .left
      flex 1
    .right
      flex 0 0 500px
      margin-left 20px
    .warehouse
      background-color #fff
      padding 10px 20px
      margin-bottom 20px
      box-sizing border-box
      text-align left
      .text
        color #5c5c5c
        line-height 2em
        .time
          >p
            display inline-block
      .draw
        height 400px
      .title
        color #424857
        font-size 16px
        position relative
        padding-left 20px
        line-height 36px
        border-bottom 1px solid #e3e6ec
        text-align left
        .time
          position absolute
          top 0px
          right 0px
        &:after
          content ''
          display block
          width 3px
          height 16px
          top 50%
          left 0
          margin-top -8px
          background-color #FF6D60
          position absolute
</style>
